<template>
	<view class="search-box" :style="{ margin, width, height, backgroundColor }" @tap.stop="onClick">
		<image src="http://www.xvopen.com/xiaoV/img1/search.png" mode="aspectFit"></image>
		<input :disabled="disabled" type="text" style="color: #0E151D;width: 500rpx;" :placeholder="placeholder" placeholder-style="color:#AEAEAE;font-size:28rpx;" @focus="focus" @input="input" @confirm="confirm" :value="inputValue"/>
	</view>

</template>

<script setup>
	defineProps({
		margin: {
			type: String,
			default: '51rpx 24rpx 0'
		},
		width: {
			type: String,
			default: '702rpx'
		},
		height: {
			type: String,
			default: '80rpx'
		},
	    fontSize: {
		    type: String,
		    default: '32rpx'
		},
		backgroundColor: {
		    type: String,
		    default: '#fff'
		},
		placeholder: {
		    type: String,
		    default: function(){
				return '搜索'
			}
		},
		inputValue: {
		    type: String
		},
		disabled: {
			type: Boolean,
			default: false
		}
	})


const emits = defineEmits(['input', 'click', 'confirm', 'focus'])

const input = (e) => {
  emits('input',e)
}

const onClick = () => {
  emits('click')
}

const confirm = ({ detail: { value } }) => {
    console.log(value)
  emits('confirm', value)
}

const focus = () => {
  emits('focus')
}
</script>

<style scoped lang="scss">
.search-box{
		display: flex;
		align-items: center;
		border-radius: 44rpx;
		// background-color: #fff;
		image{
			width: 32rpx;
			height: 32rpx;
			margin: 0 12rpx 0 32rpx;
		}
	}

</style>
